<template>
  <div class="bg-light">
    <div class="container-title">基础设置</div>
    <Form ref="form" :label-width="100" :rules="rules" :model="form">
      <Row class="pr">
        <i-col span="8">
          <FormItem label="促销名称" prop="name">
            <Input v-model="form.name" placeholder="请输入名称" :maxlength="15" />
          </FormItem>
        </i-col>
      </Row>
      <Row>
        <i-col span="8">
          <FormItem label="使用期限" prop="date">
            <fomatDate
              v-model="form.date"
              :date-value="form.date"
            />
            <!-- <DatePicker placeholder="开始时间" type="datetimerange" v-model="form.date" :options="options"></DatePicker> -->
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="促销类型" prop="type">
            <Select v-model="form.type" placeholder="促销类型" @on-change="onSelectType">
              <Option value="1">满M件减N件</Option>
              <Option value="2">M件N折</Option>
              <Option value="3">M元任选N件</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <div v-if="form.type=='1'" class="col-li">
            <FormItem label="活动规则" prop="main">:满
              <Input v-model="form.main" style="width:60px" placeholder :maxlength="2" />件减
            </FormItem>
            <FormItem prop="second" class="col-left mr">
              <Input v-model="form.second" style="width:60px" placeholder :maxlength="1" />件
            </FormItem>
            <FormItem class="col-left">
              <Checkbox v-model="form.isParcel" class="item-li">包邮</Checkbox>
            </FormItem>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <div v-if="form.type=='3'" class="col-li">
            <FormItem label="活动规则" prop="moreMoney">:满
              <Input v-model="form.moreMoney" style="width:60px" :maxlength="4" />
            </FormItem>
            <FormItem prop="piece" class="col-left">任选
              <Input v-model="form.piece" style="width:60px" :maxlength="1" />
            </FormItem>
            <FormItem class="col-left">
              <Checkbox v-model="form.isParcel" class="item-li">包邮</Checkbox>
            </FormItem>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="24">
          <div v-if="form.type=='2'" class="col-li">
            <div class>
              <FormItem
                v-for="(item, index) in form.type2"
                :key="index"
                :label="index<1 ?'促销规则': ''"
                :prop="'type2.' + index + '.value'"
                :rules="{validator: validatem, trigger: 'blur'}"
              >
                <div class="item-li">:满
                  <Input v-model="item.value" style="width:60px" placeholder :maxlength="1" />件
                </div>
              </FormItem>
            </div>
            <div>
              <FormItem
                v-for="(item, index) in form.type1"
                :key="index"
                class="col-left"
                :prop="'type1.' + index + '.value'"
                :rules="{validator: validaten, trigger: 'blur'}"
              >
                <div class="item-li">打
                  <Input v-model="item.value" style="width:60px" placeholder :maxlength="3" />折
                </div>
              </FormItem>
            </div>
            <ul class="col-ul">
              <li v-for="(item, index) in form.type2" :key="index">
                <Button
                  v-show="index<1"
                  type="primary"
                  icon="md-add"
                  size="small"
                  class="mr"
                  @click="onAddDiscount"
                />
                <Button
                  v-show="index>0"
                  type="primary"
                  icon="md-remove"
                  size="small"
                  class="mr"
                  @click="onReduceDiscount(index)"
                />
                <Checkbox v-model="item.isParcel">包邮</Checkbox>
              </li>
            </ul>
          </div>
        </i-col>
      </Row>
      <Row class="pr">
        <i-col span="16">
          <FormItem label="活动对象" prop="grade">
            <CheckboxGroup v-model="form.grade">
              <Checkbox v-for="item in storeTypeData" :key="item.id" :label="item.value">{{ item.text }}</Checkbox>
            </CheckboxGroup>
          </FormItem>
        </i-col>
      </Row>
      <Row class="pr">
        <FormItem label="参与方式" prop="gender">
          <RadioGroup v-model="form.gender">
            <Radio v-show="form.type!=='3'" label="1">全场商品参加</Radio>
            <Radio label="2">部分商品参加</Radio>
            <Radio v-show="form.type!=='3'" label="3">部分商品不参加</Radio>
          </RadioGroup>
        </FormItem>
      </Row>
      <Row class="pr">
        <i-col span="8">
          <FormItem label="活动备注" prop="remarks">
            <Input v-model="form.remarks" type="textarea" :maxlength="128" placeholder="请输入活动备注" />
          </FormItem>
        </i-col>
      </Row>
    </Form>
  </div>
</template>
<script>
import fomatDate from '@/components/ChoseDateFormat'
export default {
  components: {
    fomatDate
  },
  props: {
    form: Object,
    rules: Object
  },
  data () {
    return {
      options: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now() - 86400000
        }
      },
      gradeList: [],
      termList: [
        {
          id: 1,
          name: '限IP/UDID'
        },
        {
          id: 2,
          name: '限帐号'
        }
      ]
    }
  },
  computed: {
    storeTypeData () {
      return this.$store.getters.storeTypeData
    }
  },
  mounted () {
    this.$store.dispatch('getStoreType')
  },
  methods: {
    validatem (rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入商品数量'))
      } else if (!/^([1-8])$/.test(value)) {
        return callback(new Error('数量必须在1-8件'))
      } else if (rule.field == 'type2.1.value') {
        if (Number(this.$store.state.moreSale.MoresaleForm.type2[1].value) <= Number(this.$store.state.moreSale.MoresaleForm.type2[0].value)) {
          return callback(new Error('二阶必须大于一阶件数'))
        } else {
          callback()
        }
      } else if (rule.field == 'type2.2.value') {
        if (Number(this.$store.state.moreSale.MoresaleForm.type2[2].value) <= Number(this.$store.state.moreSale.MoresaleForm.type2[1].value)) {
          return callback(new Error('三阶必须大于二阶件数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    validaten (rule, value, callback) {
      if (!value) {
        return callback(new Error('请输入打折数'))
      } else if (Number(value) < 5 || Number(value) > 9) {
        return callback(new Error('折扣必须在5-9折'))
      } else if (rule.field == 'type1.1.value') {
        if (Number(this.$store.state.moreSale.MoresaleForm.type1[1].value) >= Number(this.$store.state.moreSale.MoresaleForm.type1[0].value)) {
          return callback(new Error('二阶必须小于一阶折'))
        } else {
          callback()
        }
      } else if (rule.field == 'type1.2.value') {
        if (Number(this.$store.state.moreSale.MoresaleForm.type1[2].value) >= Number(this.$store.state.moreSale.MoresaleForm.type1[1].value)) {
          return callback(new Error('三阶必须小于二阶折'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    },
    onAddDiscount () {
      this.$store.commit('onAddDiscountmore')
    },
    onReduceDiscount (index) {
      this.$store.commit('onReduceDiscountmore', index)
    },
    onSelectType () {
      this.form.type == '2' ? (this.form.gender = '1') : ''
    }
  }
}
</script>

